<template>
    <div class="white-box" style="min-height: 600px">
        <title-more title="小程序支付设置" />
        <cell-tip bottom="40px" tip="微信支付和通联支付只可以选择其一开启，并进行配置！" />
        <div class="pay-box">
            <div class="pay-item" v-for="(item, index) in iconArrs" :key="index">
                <img class="pay-item__icon" :src="item.icon" alt="图标" />
                <p class="pay-item__title">{{ item.title }}</p>
                <p class="pay-item__text">{{ item.text }}</p>
                <!-- :before-change="() => beforeSwitchChange(item, index)" -->
                <el-switch
                    v-model="item.select"
                    size="large"
                    inline-prompt
                    active-text="开启"
                    inactive-text="关闭"
                    :inactive-value="0"
                    :active-value="1"
                    @change="() => changeSwitch(item, index)"
                />
                <p class="pay-item__btn" @click.stop="toConfig(item)">配置</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import { useBaseStore } from "@store/base"
import { onBeforeRouteLeave } from "vue-router"
import { useRouter } from "vue-router"
import CellTip from "@components/cell-tip.vue"
import TitleMore from "@components/title-more.vue"

import icon19 from "@images/icon19.png"
import icon18 from "@images/icon18.png"

const { proxy } = getCurrentInstance()

const storeBase = useBaseStore()
const router = useRouter()

// 离开-可以利用这个触发删除页面缓存操作
onBeforeRouteLeave((to, from, next) => {
    if (from.name === "AppletPay") {
        storeBase.setInclude("AppletPay")
    }
    next()
})

onMounted(() => {
    getWxConfig()
})

const iconArrs = ref([
    {
        icon: icon18,
        title: "微信支付",
        text: "小程序原生支付方式，使用微信商户平台进行收付、对账",
        select: 0,
        url: "/Setup/AppletWxPay",
        type: 1,
        payment_id: "",
    },
    {
        icon: icon19,
        title: "通联支付",
        text: "一体化综合支付优势，融合线上线下，满足商家多元化支付场景覆盖和智能化账务管理需求",
        select: 0,
        url: "/Setup/AppletAllinPay",
        type: 2,
        payment_id: "",
    },
])
// 去配置
const toConfig = (item) => {
    router.push(item.url)
}
// before-change switch之前开启关闭
const beforeSwitchChange = (item, index) => {
    return new Promise((resolve, reject) => {
        if (index == 0 && iconArrs.value[1].select) {
            proxy.$message({ message: "微信支付和通联支付只可以选择其一开启", type: "warning" })
            return false
        }
        if (index == 1 && iconArrs.value[0].select) {
            proxy.$message({ message: "微信支付和通联支付只可以选择其一开启", type: "warning" })
            return false
        }
        changeSwitch(item)
        return resolve(true)
    })
}
// change
function changeSwitch(item) {
    let url = item.type == 1 ? "payment/receiveStatus" : "payment/allinStatus"
    proxy.$axios
        .post(url, {
            payment_id: item.payment_id,
        })
        .then((res) => {
            if (res.data.code == 0) {
                proxy.$message({ message: "操作成功", type: "success" })
                getWxConfig()
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 获取微信支付状态
function getWxConfig() {
    proxy.$axios
        .get("payment/receiveInfo")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                if (result) {
                    iconArrs.value[0].select = Number(result.open_status) // 启用状态[0:未启用,1:已启用]
                    iconArrs.value[0].payment_id = result.payment_id // 启用状态[0:未启用,1:已启用]
                }
                getAllineConfig()
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
// 获取通联状态
function getAllineConfig() {
    proxy.$axios
        .get("payment/allinInfo")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                if (result) {
                    iconArrs.value[1].select = Number(result.open_status) // 启用状态[0:未启用,1:已启用]
                    iconArrs.value[1].payment_id = result.payment_id
                }
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "AppletPay",
}
</script>

<style lang="less" scoped>
.pay-box {
    display: flex;
    align-items: flex-start;
    .pay-item {
        border: 1px solid #ededed;
        border-radius: @radius-xs;
        overflow: hidden;
        padding: @padding-lg @padding-mdl;
        margin-right: @margin-mdl;
        text-align: center;
        flex: none;
        width: 340px;
        &:last-child {
            margin-right: 0;
        }
        .pay-item__icon {
            width: 40px;
        }
        .pay-item__title {
            color: @gray-8;
            font-size: @font-size-lg;
            font-weight: bold;
            margin: @margin-md 0 @margin-xs;
        }
        .pay-item__text {
            color: @gray-6;
            font-size: @font-size-md;
            margin-bottom: @margin-xs;
        }
        .pay-item__btn {
            background-color: @gray-1;
            font-size: @font-size-md;
            color: #000;
            margin-top: @margin-sm;
            padding: @padding-xs 0px;
            cursor: pointer;
            border-radius: @radius-md;
            overflow: hidden;
            &:hover {
                background-color: @gray-2;
            }
        }
    }
}
</style>
